<template>
  <div class="WarningLevel-root">
    <formTitleVue
      title="预警等级统计"
      :selectOptions="selectOptions"
      @selectChange="selectChange"
    />
    <!-- <div id="echarts-types"></div> -->
    <myPieRing domId="jcyj-WarningLevel-echarts" height="30vh" :chartsData="chartsData" :myOption="echartsOption"/>
  </div>
</template>

<script>
import formTitleVue from "@/components/FormTitle/formTitle.vue";
import myPieRing from '@/components/Echarts/myPieRing.vue';
import { time_select_optios } from '@/utils/global.js';
import {alarmListAreaWarnLevel} from "@/api/alarm/statistics";

export default {
  name: "WarningLevel",
  components: {
    formTitleVue,myPieRing,
  },
  data() {
    return {
      selectOptions: [
        {
          selectValue: "近一月",
          options:[
            { label: "近一月", value: "近一月" },
            { label: "近半年", value: "近半年" },
            { label: "近一年", value: "近一年" },
          ],
          changeFn: this.selectChange1,
        },
        {
          selectValue: "",
          options:[
            { label: "全部", value: "" },
            {label: "市政设施", value: "1"},
            {label: "房屋建筑", value: "2"},
            {label: "交通设施", value: "3"},
            {label: "在建工地", value: "4"},
            {label: "人员密集区域", value: "5"},
          ],
          changeFn: this.selectChange2,
        },
      ],
      chartsData: {
        xData: ["市政设施", "房屋建筑", "交通设施", "人员密集区域"],
        yData: [],
      },
      echartsOption:{
        legend:{
          show:false,
        }
      },
      searChForm: {
        options1: '',
        options2: '',
        startTime: '',
        endTime: '',
        type: '',
        dateType:'',
      },
    };
  },
  methods: {
    selectChange1(item){
      this.searChForm.options1 = item
      this.searChForm.startTime = time_select_optios[item].startTime +" 00:00:00"
      this.searChForm.endTime = time_select_optios[item].endTime +" 23:59:59"
      this.getData()
    },
    selectChange2(item){
      this.searChForm.options2 = item
      this.getData()
    },
    selectChange(item) {
      // console.log(item);
      this.searChForm.startTime = time_select_optios[item].startTime+" 00:00:00"
      this.searChForm.endTime = time_select_optios[item].endTime+" 23:59:59"
      this.getData()
    },
    getData(){
      console.log(this.searChForm)
      /*this.chartsData.yData = [
        {
          name:"风险等级分布",
          data: [
            {value: 12, name: '一级预警',},
            {value: 23, name: '二级预警',},
            {value: 34, name: '三级预警',},
            {value: 45, name: '四级预警',},
          ]
        }
      ]*/
      this.searChForm.type = this.searChForm.options2

      if(this.searChForm.options1=='近一月'){
        //按天
        this.searChForm.dateType='03'
      }else{
        this.searChForm.dateType=''
      }
      alarmListAreaWarnLevel(this.searChForm).then(res => {
        if (res.code == 200) {
          this.chartsData.yData = res.data
          this.loading = false
        } else {
          this.$message({
            message: this.$t('tips.systemException'),
            type: 'error'
          })
        }
      })
      this.chartsData.yData.forEach(item => {
        item.data.forEach(item => {
          item.label = {
            normal:{
              show: true,
              formatter: "{b} {d}%",
            }
          }
        })
      })
    },
  },
  mounted() {
    this.selectChange(this.selectOptions[0].selectValue)
  },
};
</script>

<style lang="scss" scoped>
.WarningLevel-root {
  #echarts-types {
    height: 30vh;
  }
}
</style>
